<template>
  <div class="employee-view">
    <h1>员工管理</h1>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-button type="primary" @click="openAddForm">添加员工</el-button>
      </el-col>
    </el-row>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <!-- 加载状态 -->
    <div v-else-if="isLoading" class="loading">
      数据加载中...
    </div>

    <!-- 主体内容 -->
    <div v-else>
      <el-table :data="filteredEmployees">
        <el-table-column prop="id" label="ID" width="80" sortable />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="department" label="部门" />
        <el-table-column prop="position" label="职位" />
        <el-table-column prop="salary" label="薪资" sortable>
          <template #default="{ row }">
            {{ row.salary.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="hireDate" label="入职日期" sortable>
          <template #default="{ row }">
            {{ formatDate(row.hireDate) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 空数据提示 -->
      <div v-if="filteredEmployees.length === 0" class="no-data">
        暂无员工数据
      </div>
    </div>

    <EmployeeForm
      v-if="isFormVisible"
      :is-editing="isEditing"
      :employee="editingEmployee"
      @submit="handleSubmit"
      @cancel="closeForm"
    />

    <DeleteDialog
      v-if="isDeleteDialogVisible"
      :employee="deletingEmployee"
      @confirm="confirmDelete"
      @cancel="closeDeleteDialog"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useEmployeeStore } from '@/stores/employeeStore';
import EmployeeForm from '@/components/EmployeeForm.vue';
import DeleteDialog from '@/components/DeleteDialog.vue';

const employeeStore = useEmployeeStore();

const filteredEmployees = computed(() => {
  return employeeStore.employees;
});

const totalEmployees = computed(() => employeeStore.employees.length);
const isLoading = computed(() => employeeStore.isLoading);

// 新增错误状态
const error = computed(() => employeeStore.error);

onMounted(async () => {
  try {
    await employeeStore.fetchEmployees();
  } catch (err) {
    console.error('数据加载失败:', err);
  }
});

const openAddForm = () => {
  isEditing.value = false;
  editingEmployee.value = null;
  isFormVisible.value = true;
};

const handleEdit = (employee) => {
  isEditing.value = true;
  editingEmployee.value = { ...employee };
  isFormVisible.value = true;
};

const handleSubmit = async (formData) => {
  if (isEditing.value) {
    await employeeStore.updateEmployee(formData.id, formData);
  } else {
    await employeeStore.addNewEmployee(formData);
  }
  isFormVisible.value = false;
  employeeStore.fetchEmployees();
};

const closeForm = () => {
  isFormVisible.value = false;
};

const handleDelete = (employee) => {
  deletingEmployee.value = employee;
  isDeleteDialogVisible.value = true;
};

const confirmDelete = async () => {
  await employeeStore.deleteEmployee(deletingEmployee.value.id);
  isDeleteDialogVisible.value = false;
  employeeStore.fetchEmployees();
};

const closeDeleteDialog = () => {
  isDeleteDialogVisible.value = false;
};

const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};
</script>

<style scoped>
.employee-view {
  padding: 20px;
}

.error-message {
  color: #f56c6c;
  margin: 20px 0;
  padding: 15px;
  background-color: #fef0f0;
  border-radius: 4px;
}

.loading {
  margin: 30px 0;
  text-align: center;
  color: #666;
}

.no-data {
  margin: 20px 0;
  padding: 15px;
  text-align: center;
  color: #999;
  background-color: #f9f9f9;
  border-radius: 4px;
}
</style>